<template>
  <el-container class="login-container">
    <div class="login-content">
      <div class="login-box">
        <h3 class="title">欢迎登录</h3>
        <el-form ref="loginFormRef" :model="form" :rules="rules" label-position="left" class="login-form">
          <el-form-item prop="username">
            <el-input v-model="form.username"  placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password"  placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model="form.code"  auto-complete="off" placeholder="验证码"
                style="width: 63%;margin-right: 5px;" @keyup.enter.native="submitForm">
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input>
            <div class="login-code" >
              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
            </div>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.rememberMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" class="login-button">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-container>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElForm, ElFormItem, ElInput, ElButton, ElCheckbox } from 'element-plus';
import axios from 'axios';
import router from '@/router';

const loginFormRef = ref(null);
const codeUrl = ref('');
const form = reactive({
  username: '',
  password: '',
  rememberMe: false,
  code:"",
  uuid:""
});
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
});
onMounted(() => {
  getCode();
});
const getCode = () => {
  axios.get('http://localhost:8080/captchaImage')
      .then((response) => {
        console.log(response);
        codeUrl.value = "data:image/gif;base64,"+response.data.data.img;
        form.uuid = response.data.data.uuid;
      })
      .catch((error) => {
        console.error(error);
      });
};

const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      const url = 'http://localhost:8080/login';
      axios.post(url, form).then((response) => {
        if (response.data.code === 200) {
          ElMessage.success('登录成功');
          localStorage.setItem('token', response.data.data);
          router.push('/resource');
        } else {
          ElMessage.error(response.data.message);
        }
      }).catch((error) => {
            ElMessage.error('登录失败，请稍后重试');
            console.error(error);
      });
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};

</script>
<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(to right, #1e90ff, #409eff); /* 渐变背景 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.login-content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end; /* 右侧对齐 */
  padding-right: 15%; /* 右侧内边距 */
}

.login-box {
  width: 400px;
  padding: 35px 35px 15px 35px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}

.login-box:hover {
  transform: translateY(-20px);
}

.login-form {
  width: 100%;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 32px;
    width: 14px;
    margin-left: 2px;
  }
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

.login-button {
  width: 100%; /* 占满整行 */
  margin-top: 10px;
}

input, .el-input__inner {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

input:focus, .el-input__inner:focus {
  border-color: #409eff;
  outline: none;
}

.el-checkbox__label {
  font-size: 14px;
  color: #606266;
}
.login-code {
  width: 33%;
  height: 35px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
.login-code-img {
  height: 35px;
}
</style>